@charset "UTF-8";

*{ 
    margin: 0;
    padding: 0;
}

html,body,#align{
	height: 100%;
}

body{
    background: #2a2a2a;
}

#align{
    margin: 0 auto;
    width: 910px;
}

#body{
    background: #3d3d3d;
    width: 900px;
    float: left;
    border-left: 3px solid #121212;
    border-right: 3px solid #121212;
    overflow: hidden;
    min-height: 100%;
}
.sucess, .notsucess{
	text-align: center;
	width: 96%;
	padding: 5px;
	margin: 5px;
	font-weight: bold;
}
.sucess{
	background: #0c0;
	color: #040;
	border: 3px solid #040;
}
.notsucess{
	background: #c00;
	color: #400;
	border: 1px solid #400;
}
.line{
	background: #555;
}
.new{
	background: url('../img/new.png') no-repeat;
}

/*FORM*/
#content form{
	float: left;
	width: 52%;
}
#content form label{
	display: block;
	font-weight: bold;
}
#content form select{
	height: 22px;
	width: 100%;
}
#content form p input,select{
	width: 98%;
	border: 1px solid #000;
	height: 16px;
	background: #ccc;
	font-weight: bold;
	padding: 2px;
	margin-bottom: 10px;
}
#content .button{
	width: 100%;
	background: #999;
	color: #000;
	font-weight: bold;
	height: 25px;
	border: 1px solid #000;
	margin-top: 10px;
}
#content .button:hover{
	background: #555;
	color: #fff;
}
#content fieldset{
	border: 2px dotted #999;
	padding: 15px 20px;
	margin-top: 10px;
}
#content fieldset a{
	margin: 3px 10px;
}
.helptext{
	font-size: 9pt;
}
#id_mensagem{
	width: 550px;
	height: 90px;
}

/*ATTR*/
#attr{
	float: left;
	width: 50%;
}
#attr table{
	margin: 5px 20px;
}
#mp, #hp, #forca, #inteligencia, #constituicao, #agilidade{
	float: right;
	margin-right: 150px;
	padding-left: 5px;
}

/*AVATAR*/
#avatar-body{
	float: right;
	background: #333;
	width: 42%;
	padding: 10px;
}
#avatar{
	width: 170px;
	height: 185px;
	padding: 10px;
	margin: 0 auto;
}
#change-avatar{
	width: 95%;
	background: #555;
	padding: 5px;
}
#change-avatar ul li{
	list-style: none;
	display: inline-block;
	margin: 0 25px;
}

/*SELEÇÃO DE AVATAR*/
#change-character table tr{
	width: 160px;
}
#change-character .button{
	width: 50%;
	display: none;
}
#change-character label{
	font-weight: bold;
	text-transform: capitalize;
}
#change-character form{
	width: 100%;
}
#change-character img{
	display: inline;
	padding: 10px 20px;
}
.select{
	opacity: 0.3;
}

/*BANNER*/
#banner{
    background: url('../img/banner.jpg');
    height: 314px;
    border-bottom: 3px solid #121212;
}
#banner-body{
	float: right;
	margin: 5px 16px;
	color: #fff;
	width: 210px;
}
#img-avatar{
	width: 170px;
	height: 185px;
	margin: 0 auto;
}
#info{
	text-decoration: none;
	height: 70px;
	padding: 5px;
	width: 160px;
}
#name{
	width: 170px;
}
#name, #info{
	background: #444;
	font-weight: bold;
	color: #ccc;
	margin: 5px auto;
}

/*SIDEBAR*/
#sidebar{
    float: left;
    background: #303030;
    width: 220px;
    padding-bottom: 1000em;
    margin-bottom: -999.5em;
    border-right: 3px solid #121212;
}
#sidebar h1{
    margin: 5px 0;
    background: #121212;
    padding: 2px 18px;
    font: 14pt tahoma,sans-serif;
    color: #939393;
}
#sidebar ul li{
    list-style: none;
}
#sidebar ul li a{
    margin: 2px 25px;
    text-decoration: none;
    font: 11pt tahoma,sans-serif;
    color: #939393;
}
#sidebar ul li a:hover{
    text-decoration: underline;
}

/*SUB-MENU*/
#content #sub-menu{
	border-bottom: 2px dotted #999;
}
#content #sub-menu a{
	font-weight: bold;
	margin: 10px;
}

/*CONTENT*/
#content-body{
    float: right;
    width: 657px;
    padding: 10px;
    padding-bottom: 30px;
    color: #ccc;
}
#content-body h1{
    background: url('../img/logo_subject.jpg') no-repeat #121212;
    height: 27px;
    padding: 11px 63px;
    font: bold 16pt tahoma,sans-serif;
    color: #939393;
}
#content{
    font: 12pt tahoma,sans-serif;
    margin: 10px 10px 10px 30px;
}
#content a{
    margin: 2px 25px;
    text-decoration: none;
    font: 11pt tahoma,sans-serif;
    color: #ccc;
}
#content a:hover{
    text-decoration: underline;
}
#content label{
	display: block;
	margin-bottom: 5px;
}

/*PERFIL PERSONAGEM*/
#imgCharacter img{
	margin: 0 auto;
}
#imgCharacter{
	padding: 8px;
	width: 33%;
	float: left;
}
#infoCharacter{
	padding: 5px;
	width: 60%;
	float: right;
}
#infoCharacter tr td{
	padding: 1px 3px;
	margin: 2px;
}
.title{
	background: #333;
	color: #aaa;
	text-align: center;
}
#equipment{
}
#model{
	background: url('../img/modelo-cinza.jpg');
	margin: 0 10px;
	width: 554px;
	height: 582px;
}

/*Store*/
#store table, #inventory table{
	border: 2px solid #999;
	margin-bottom: 10px;
}
#store table tr, #inventory tr{
	padding: 3px;
}
#store ul li, #inventory ul li{
	list-style: none;
	margin: 7px 20px;
}
#store .button{
	width: 60%;
	margin: 2px;
	display: inline;
}
#inventory .button{
	width: 40%;
	margin: 2px 10px;
	display: inline;
}

.nameItem{
	padding: 0 5px;
}
.infoItem{
	background: #555;
}
.imgItem{
	padding: 3px;
	margin: 0 5px;
}

/*FOOTER*/
#footer{
    background: #181818;
    color: #939393;
    padding: 15px;
    text-align: center;
    clear: both;
}

#erro{
	width: 100%;
	font-size: 11pt;
	background: #ffc125;
	color: #f00;
	text-align: center;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
}

.errorlist{
	list-style: none;
	font-size: 9pt;
	color: #e00;
	font-weight: bold;	
}
